/* eslint-disable no-debugger */
import { CloseOutlined, ControlOutlined, FilterOutlined } from "@ant-design/icons";
import {
	BetaSchemaForm,
	LightFilter,
	ProForm,
	ProFormDatePicker,
	ProFormDateTimePicker,
	ProFormDependency,
	ProFormList,
	ProFormSelect,
	ProFormText,
	QueryFilter
} from "@ant-design/pro-components";
import { Tooltip, Button, theme, Drawer, Empty, Tabs, TabsProps, Select, Space, Flex, Typography } from "antd";
import React, { useEffect, useRef, useState } from "react";
const { getDesignToken } = theme;
const globalToken = getDesignToken();
const TabPageHeader: React.FC<any> = ({ children }) => {
	return (
		<>
			<Flex vertical gap="small">
				{children}
			</Flex>
		</>
	);
};

const FilterDrawer: React.FC<any> = ({
	title = "条件过滤",
	mask = false,
	width = 400,
	columns,
	tableActionRef,
	onSubmit = () => {},
	onReset = () => {}
}) => {
	const formRef = useRef(null);
	const [open, setOpen] = useState<boolean>(false);
	const [dataColumn, setDataColumn] = useState<any>([]);
	const onClose = () => {
		setOpen(false);
	};
	const onOpen = () => {
		setOpen(true);
	};
	const items: TabsProps["items"] = [
		{
			key: "1",
			label: "过滤项",
			children: 123
		},
		{
			key: "2",
			label: "常用过滤",
			children: "Content of Tab Pane 2"
		}
	];
	const formateColumn = () => {
		const filteredColumns = columns.filter(
			(column: { hideInSearch?: boolean }) => !column.hideInSearch || column.hideInSearch !== true
		);
		setDataColumn(filteredColumns);
	};

	useEffect(() => {
		formateColumn();
	}, [columns]);

	return (
		<>
			<BetaSchemaForm<any>
				formRef={formRef}
				open={open}
				title={title}
				drawerProps={{
					closeIcon: false,
					styles: {
						body: {
							padding: "10px 20px"
						}
					},
					// mask: false,
					// maskClosable: false,
					onClose: () => {
						onClose();
					},
					width: width,
					placement: "right",
					extra: <Button icon={<CloseOutlined />} type="text" onClick={onClose} />
				}}
				trigger={
					<Tooltip placement="bottom" title={title}>
						<Button icon={<FilterOutlined style={{ fontSize: "16px", color: globalToken.colorBgMask }} />} onClick={onOpen} />
					</Tooltip>
				}
				colProps={{
					span: 24
				}}
				submitter={{
					render: (props, doms) => {
						return [
							<Button
								htmlType="button"
								key="edit"
								onClick={() => {
									onClose();
									onReset();
									// @ts-ignore
									formRef?.current?.resetFields();
								}}
							>
								重置
							</Button>,
							<Button
								htmlType="button"
								type="primary"
								key="submit"
								onClick={() => {
									props.submit();
								}}
							>
								搜索
							</Button>
						];
					}
				}}
				onReset={() => {
					console.log("aa");
				}}
				layoutType="DrawerForm"
				columns={dataColumn}
				// @ts-ignore
				onFinish={values => {
					onSubmit(values);
					onClose();
				}}
			/>
		</>
	);
};
export default FilterDrawer;
